<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>二手手机收售管理系统</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">
    <link href="layui/css/layui.css" rel="stylesheet">
  <!-- Fonts START -->
  <!-- Fonts END -->

  <!-- Global styles START -->          
  <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <link href="assets/plugins/owl.carousel/assets/owl.carousel.css" rel="stylesheet">
  <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
  <link href="assets/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="assets/pages/css/components.css" rel="stylesheet">
  <link href="assets/corporate/css/style.css" rel="stylesheet">
  <link href="assets/pages/css/style-shop.css" rel="stylesheet" type="text/css">
  <link href="assets/corporate/css/style-responsive.css" rel="stylesheet">
  <link href="assets/corporate/css/themes/red.css" rel="stylesheet" id="style-color">
  <link href="assets/corporate/css/custom.css" rel="stylesheet">

    <script type="text/javascript" src="axios/vue.js"></script>
    <script type="text/javascript" src="axios/axios.min.js"></script>
    <script type="text/javascript" src="axios/qs.js"></script>
    <script type="text/javascript" src="axios/getUrlParams.js"></script>
    <script type="text/javascript" src="layer/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
  <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body class="ecommerce">
    <!-- BEGIN STYLE CUSTOMIZER -->
    <div class="color-panel hidden-sm">
      <div class="color-mode-icons icon-color"></div>
      <div class="color-mode-icons icon-color-close"></div>
      <div class="color-mode">
        <p>THEME COLOR</p>
        <ul class="inline">
          <li class="color-red current color-default" data-style="red"></li>
          <li class="color-blue" data-style="blue"></li>
          <li class="color-green" data-style="green"></li>
          <li class="color-orange" data-style="orange"></li>
          <li class="color-gray" data-style="gray"></li>
          <li class="color-turquoise" data-style="turquoise"></li>
        </ul>
      </div>
    </div>
    <!-- END BEGIN STYLE CUSTOMIZER --> 

    <!-- BEGIN TOP BAR -->
    <div class="pre-header" id="loginiframe">

    </div>
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <div class="header">
        <div class="container" id="headeriframe">
            <!-- BEGIN CART -->
            <!--END CART -->
            <!-- BEGIN NAVIGATION -->
            <!-- END NAVIGATION -->
        </div>
    </div>
    <!-- Header END -->
    
    <div class="main">
      <div class="container">
        <ul class="breadcrumb">
            <li><a href="index.html">首页</a></li>
            <li class="active">商品详情</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40" id="app">
          <!-- BEGIN SIDEBAR -->
          <!-- END SIDEBAR -->

          <!-- BEGIN CONTENT -->
          <div class="col-md-9 col-sm-7">
            <div class="product-page">
              <div class="row">
                <div class="col-md-6 col-sm-6">
                  <div class="product-main-image">
                    <img :src="['upload/'+product.filename]" class="img-responsive" data-BigImgsrc="assets/pages/img/products/model7.jpg">
                  </div>
                    <!--
                  <div class="product-other-images">
                    <a href="assets/pages/img/products/model3.jpg" class="fancybox-button" rel="photos-lib"><img alt="Berry Lace Dress" src="assets/pages/img/products/model3.jpg"></a>
                    <a href="assets/pages/img/products/model4.jpg" class="fancybox-button" rel="photos-lib"><img alt="Berry Lace Dress" src="assets/pages/img/products/model4.jpg"></a>
                    <a href="assets/pages/img/products/model5.jpg" class="fancybox-button" rel="photos-lib"><img alt="Berry Lace Dress" src="assets/pages/img/products/model5.jpg"></a>
                  </div>
                  -->
                </div>
                <div class="col-md-6 col-sm-6">
                  <h1>{{product.name}}</h1>
                  <div class="price-availability-block clearfix">
                    <div class="price">
                      <strong><span>￥</span>{{product.price}}</strong>
                    </div>
                      <!--
                    <div class="availability">
                      Availability: <strong>In Stock</strong>
                    </div>
                    -->
                  </div>

                    <div class="product-page-options" style="border-top:0px;">
                        <div class="pull-left">
                            <label>商品类别:</label>
                            <label>{{product.fcategory.name}}/{{product.ccategory.name}}</label>
                        </div>

                    </div>

                    <div class="product-page-options" style="border-top:0px;">
                        <div class="pull-left">
                            <label>销量:</label>
                            <label>{{product.salenum}}</label>
                        </div>

                    </div>


                    <!--

                    <div class="product-page-options" style="border-top:0px;">
                        <div class="pull-left">
                            <label>回复:</label>
                            <label>{{product.seller.tname}}</label>
                            <label>联系电话:</label>
                            <label>{{product.seller.tel}}</label>
                        </div>
                    </div>
                    -->

                    <!--
                  <div class="product-page-options">
                    <div class="pull-left">
                      <label class="control-label">Size:</label>
                      <select class="form-control input-sm">
                        <option>L</option>
                        <option>M</option>
                        <option>XL</option>
                      </select>
                    </div>
                    <div class="pull-left">
                      <label class="control-label">Color:</label>
                      <select class="form-control input-sm">
                        <option>Red</option>
                        <option>Blue</option>
                        <option>Black</option>
                      </select>
                    </div>
                  </div>
                  -->
                  <div class="product-page-cart" style="border-bottom: 0px;">
                      <!--
                    <div class="product-quantity">
                        <input id="product-quantity" type="text" value="1" readonly class="form-control input-sm">
                    </div>
                    -->
                     <a  class="btn btn-primary" type="submit" @click="addcart(product.id)">加入购物车</a>
                      <a  class="btn btn-primary" type="submit" @click="addfav(product.id)">加入收藏</a>
                  </div>
                </div>

                <div class="product-page-content">
                  <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#Description" data-toggle="tab">商品描述</a></li>
                    <li ><a href="#Reviews" data-toggle="tab">评价</a></li>
                  </ul>
                  <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="Description">
                      <p v-html="product.content">{{product.content}}</p>
                    </div>

                    <div class="tab-pane fade" id="Reviews">
                      <!--<p>There are no reviews for this product.</p>-->
                      <div v-for="message in messagelist" class="review-item clearfix">
                        <div class="review-item-submitted">
                            <div style="display: flex;align-items: center">
                                <img :src="['upload/'+message.member.filename]" style="width: 10%;">
                                <strong style="margin-left: 5px;">{{message.member.tname}}</strong>
                            </div>
                          <em>{{message.savetime}}</em>
                          <div class="rateit" data-rateit-value="5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                        </div>                                              
                        <div class="review-item-content">
                            <p>{{message.content}}</p>

                            <p v-if="message.hfcontent!=null && message.hfcontent!=''"  style="padding-left: 30px;"><span class="layui-badge" style="margin-right: 10px;">回复:</span>{{message.hfcontent}}</p>
                        </div>
                      </div>

                        <div  id="demo1" style="text-align:center"></div>



                      <!-- BEGIN FORM-->
                      <form action="#" class="reviews-form" role="form">
                        <h2></h2>
                        <div class="form-group">
                          <label for="review">请在下方填写评价信息 <span class="require">*</span></label>
                          <textarea class="form-control" v-model="content" rows="8" id="review"></textarea>
                        </div>
                        <div class="padding-top-20">
                          <a type="submit" class="btn btn-primary" @click="massageadd(product.id)">提交</a>
                        </div>
                      </form>
                      <!-- END FORM--> 
                    </div>
                  </div>
                </div>

                <div class="sticker sticker-sale"></div>
              </div>
            </div>
          </div>


            <div class="sidebar col-md-3 col-sm-5">

                <div class="sidebar-products clearfix">
                    <h2>猜你喜欢</h2>


                    <div v-for="(loveproduct,i) in lovelist" class="item" v-if="i<5">
                        <a :href="['productdetails.html?id='+loveproduct.id]"><img :src="['upload/'+loveproduct.filename]" alt="Some Shoes in Animal with Cut Out"></a>
                        <h3><a :href="['productdetails.html?id='+loveproduct.id]">{{loveproduct.name}}</a></h3>
                        <div class="price">￥{{loveproduct.price}}</div>
                    </div>


                </div>
            </div>
          <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->

        <!-- BEGIN SIMILAR PRODUCTS -->

        <!-- END SIMILAR PRODUCTS -->
      </div>
    </div>

    <!-- BEGIN BRANDS -->
    <!-- END BRANDS -->

    <!-- BEGIN STEPS -->

    <!-- END STEPS -->

    <!-- BEGIN PRE-FOOTER -->

    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer" id="footiframe">

    </div>
    <!-- END FOOTER -->

    <!-- BEGIN fast view of a product -->

    <!-- END fast view of a product -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <!-- END PAGE LEVEL JAVASCRIPTS -->

    <script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="assets/corporate/scripts/back-to-top.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
    <script src="assets/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->
    <script src='assets/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script><!-- product zoom -->
    <script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script><!-- Quantity -->
    <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="assets/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>

    <script src="assets/corporate/scripts/layout.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            Layout.init();
            Layout.initOWL();
            Layout.initTwitter();
            Layout.initImageZoom();
            Layout.initTouchspin();
            Layout.initUniform();
        });
    </script>
</body>



<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var qs = Qs
    var id = UrlParam.paramValues("id")==undefined?"":UrlParam.paramValues("id").toString()
    var vmm = new Vue({
        el:"#app",
        data:{
            id:id,
            product:"",
            lovelist:[],
            sessionmember:"",
            content:"",
            messagelist:[],
            pageSize:10,
        },
        mounted(){
            sessionStorage.setItem("signoutShow","productmsg")
            this.getmember()
            this.show()
        },
        methods:{
            getmember(){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        this.sessionmember = response.data.sessionmember
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },
            massageadd(productid){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        axios.post('massageAdd',qs.stringify({
                            productid:productid,
                            content:this.content,
                        })).then(response =>{
                            if(response.data.data==400){
                                layer.msg("没有购买记录，操作失败",{icon:5})
                            }else{
                                layer.msg("操作成功",{icon:6})
                                this.getmessagelist()
                            }

                        }).catch(error =>{
                            console.log(error)
                        })
                    }else{
                        location.replace("login.html")
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },
            jiubao(productid){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==400){
                        location.replace("login.html")
                    }else{
                        var index = layer.open({
                            title:"举报",
                            type:2,
                            area:['500px','400px'],
                            maxmin:true,
                            content:"reportadd.html?productid="+productid
                        })
                    }
                }).catch(error =>{
                    console.log(error)
                })


            },
            addfav(productid){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==400){
                        location.replace("login.html")
                    }else{
                        axios.post('favAdd',qs.stringify({
                            productid:productid,
                        })).then(response =>{
                            if(response.data.data==200){
                                layer.msg("收藏成功",{icon:6})
                            }else{
                                layer.msg("已存在收藏记录",{icon:5})
                                headapp.getcheckmember();
                            }

                        }).catch(error =>{
                            console.log(error)
                        })
                    }
                }).catch(error =>{
                    console.log(error)
                })


            },
            addcart(productid){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        axios.post('cartAdd',qs.stringify({
                            productid:productid,
                        })).then(response =>{
                            if(response.data.data==400){
                                layer.msg("购物车已存在此商品",{icon:5})
                            }else{
                                layer.msg("加入购物车成功",{icon:6})
                                headapp.getcheckmember();
                            }

                        }).catch(error =>{
                            console.log(error)
                        })
                    }else{
                        location.replace("login.html")
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },

            show(){
                axios.post('admin/productShow',qs.stringify({
                    id:this.id,
                })).then(response =>{
                    this.product = response.data.product
                    this.lovelist = response.data.lovelist
                        this.getmessagelist()
                }).catch(error =>{
                    console.log(error)
                })
            },


            getmessagelist() {
                axios.post('messageLb',qs.stringify({
                    productid:this.id,
                    pageSize:this.pageSize
                })).then(response =>{
                    layui.use(['laypage', 'layer'], function(){
                        var laypage = layui.laypage
                            ,layer = layui.layer;
                        //总页数大于页码总数
                        laypage.render({
                            elem: 'demo1'
                            ,limit:vmm.pageSize
                            ,count: response.data.list.length //数据总数
                            ,jump: function(obj,first){
                                vmm.current_page(obj.curr,vmm.pageSize)
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            }
                        });
                    });
                }).catch(error =>{
                    console.log(error)
                })
            },
            current_page(page,pageSize){
                axios.post('messageLb',qs.stringify({
                    productid:this.id,
                    pageNum:page,
                    pageSize:pageSize,
                })).then(response =>{
                    this.messagelist = response.data.pageInfo.list
                }).catch(error =>{
                    console.log(error)
                })
            },

        }
    })

</script>
<script type="text/javascript">
    window.onload=function(){
        $("#loginiframe").load("iframe/loginiframe.html")
        $("#headeriframe").load("iframe/headeriframe.html")
        $("#footiframe").load("iframe/footiframe.html")
    }
</script>
<!-- END BODY -->
</html>